<template>
  <div class="lend-record-list-wrap">

    <div class="lend-record-list-box" ref="wrapper" v-if="showData == 1">
      <div class="lend-record-list">
        <div class="lend-record-item" v-for="(item,index) in lendRecordList" :key="index"
             v-if="lendRecordList.length">
          <div class="lend-money-box">
            <span class="lend-time">{{item.time | format}}</span>
            <span class="lend-money">{{item.lendMoney | formatMoney}}元</span>
          </div>
          <span class="lend-status status-mark1" v-if="item.lendStatus == 0">审核中</span>
          <span class="lend-status" v-else-if="item.lendStatus == 1">已通过</span>
          <span class="lend-status status-mark2" v-else-if="item.lendStatus == 2">已拒绝</span>
          <span class="lend-status status-mark3" v-else-if="item.lendStatus == 3">已还款</span>
        </div>
      </div>
    </div>

    <div class="empty-wrap" v-if="showData == 2">
      <div class="empty-box">
        <div class="img-box"><img src="../empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">抱歉,未找到相关内容~</div>
      </div>
    </div>

  </div>
</template>

<script>
  import {baseUrl} from "../../../config/env";
  import BScroll from 'better-scroll';
  import {formatDate, getDeviceRatio, toDecimal} from "../../../config/util";
  /*获取当前缩放比*/
  const DEVICE_RATIO = getDeviceRatio();
  /**
   *
   * @param threshold 触发事件的阀值，即滑动多少距离触发
   */
  /*上拉配置*/
  const UP_CONFIG = {
    threshold: -80 * DEVICE_RATIO,
  };

  export default {
    data() {
      return {
        showData: 0,
        lendRecordList: [],
        lendRecordScroll: null,
        currentPage: 1,
        PageSize: 20,
        noMoreData: false,
        userSign: "",
        lendId: this.$route.query.lendId
      }
    },
    created() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
    },
    mounted() {
      this.queryLendRecordList();
    },
    methods: {
      queryLendRecordList() {
        this.$vux.loading.show({
          text: '加载中',
        });

        let time = (new Date()).getTime();
        let url = baseUrl + "/resident/get_lend_money_list?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/resident/get_lend_money_list?sgin=" + this.userSign + "&lendMoneyId=" + this.lendId + "&page=" + this.currentPage + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data.length > 0) {
              this.showData = 1;
              this.lendRecordList = resultObj.data;

              this.$nextTick(() => {
                this.initScroll();
                this.lendRecordScroll.on('touchEnd', (pos) => {
                  if (Math.abs(Math.round(pos.y)) > Math.abs(Math.round(this.lendRecordScroll.maxScrollY + 1))) {
                    this.loadMore();
                  }
                });
              });
            } else {
              this.showData = 2;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      loadMore() {//加载更多
        if (!this.noMoreData) {
          this.$vux.loading.show({
            text: '加载中',
          });
          let time = (new Date()).getTime();
          let url = baseUrl + "/resident/get_lend_money_list?timestamp=" + time;
          let param = {"sgin": this.userSign, "timestamp": time};
          let signature = this.$signature(url, param);

          setTimeout(() => {
            this.axios.get(baseUrl + "/resident/get_lend_money_list?sgin=" + this.userSign + "&lendMoneyId=" + this.lendId + "&page=" + (++this.currentPage) + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
              let resultObj = res.data;
              if (resultObj.code == 0) {
                if (resultObj.data.length > 0) {
                  this.lendRecordList = this.lendRecordList.concat(resultObj.data);
                } else {
                  this.noMoreData = true;
                }
                this.$vux.loading.hide();
              } else {
                this.$vux.loading.hide();
                this.$vux.toast.text(resultObj.msg, "middle");
              }
            })
          }, 500)
        }
      },
      initScroll() {//初始化BScroll
        if (!this.lendRecordScroll) {
          this.lendRecordScroll = new BScroll(this.$refs.wrapper, {
            probeType: 3,
            deceleration: 0.003,
            bounce: false,
            swipeTime: 2000,
            click: true,
            pullUpLoad: UP_CONFIG
          });
        } else {
          this.lendRecordScroll.refresh();
        }
      },
      enable() {
        this.lendRecordScroll && this.lendRecordScroll.enable()
      },
      refresh() {
        this.lendRecordScroll && this.lendRecordScroll.refresh()
      },
      finishPullUp() {
        this.lendRecordScroll && this.lendRecordScroll.finishPullUp()
      },
    },
    filters: {
      format(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy年MM月dd日');
      },
      formatMoney(money) {
        return toDecimal(money);
      }
    },
    watch: {
      lendRecordList() {
        this.$nextTick(() => {
          this.lendRecordScroll.refresh();
        })
      }
    },
    components: {
      BScroll
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .lend-record-list-wrap
    wh(100%, 100%)
    background: #f2f2f2
    .lend-record-list-box
      position: fixed
      top: 0rem
      wh(100%, auto)
      bottom: 0
      z-index: 88
      background: #f2f2f2
      .lend-record-list
        display: flex
        flex-direction: column
        wh(100%, auto)
        .lend-record-item
          display: flex
          justify-content: center
          flex-direction: column
          wh(100%, 1.76rem)
          background: rgba(255, 255, 255, 1)
          .lend-money-box
            display: flex
            padding-bottom: 0.2rem
            .lend-time
              margin-left: 0.32rem
              font-size: 0.427rem
              color: rgba(51, 51, 51, 1)
            .lend-money
              margin-left: auto
              margin-right: 0.32rem
              font-size: 0.427rem
              font-weight: 500
              color: rgba(60, 175, 255, 1)
          .lend-status
            margin-left: auto
            margin-right: 0.32rem
            font-size: 0.373rem
            color: rgba(153, 153, 153, 1)
          .status-mark1
            color: #3CAFFF
          .status-mark2
            color: #FF5353
          .status-mark3
            color: #44CC29
    .empty-wrap
      fj(center, center)
      wh(100%, auto)
      position: fixed
      top: 2rem
      left: 0
      right: 0
      bottom: 0
      z-index: -1
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)
</style>
